<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周雁 & 周丹莉</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF5E87',
                        secondary: '#9D65C9',
                        accent: '#3498db',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .text-shadow-lg {
                text-shadow: 0 4px 8px rgba(0,0,0,0.25);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            .animate-float-reverse {
                animation: float 7s ease-in-out infinite reverse;
            }
            .bg-rainbow {
                background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
                background-size: 1800% 1800%;
                animation: rainbow 18s ease infinite;
            }
            @keyframes rainbow {
                0% { background-position: 0% 82% }
                50% { background-position: 100% 19% }
                100% { background-position: 0% 82% }
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-20px); }
                100% { transform: translateY(0px); }
            }
        }
    </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center bg-rainbow overflow-hidden">
    <!-- 装饰元素 -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-0 left-0 w-full h-full">
            <div class="absolute top-10 left-10 text-white text-4xl opacity-30 animate-pulse">
                <i class="fa fa-heart"></i>
            </div>
            <div class="absolute bottom-10 right-10 text-white text-4xl opacity-30 animate-pulse">
                <i class="fa fa-heart"></i>
            </div>
            <div class="absolute top-1/4 right-1/4 text-white text-3xl opacity-20 animate-pulse">
                <i class="fa fa-star"></i>
            </div>
            <div class="absolute bottom-1/3 left-1/3 text-white text-3xl opacity-20 animate-pulse">
                <i class="fa fa-star"></i>
            </div>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="container mx-auto px-4 py-8 relative z-10">
        <div class="text-center mb-12 animate-float">
            <h1 class="text-[clamp(2rem,5vw,4rem)] font-bold text-white text-shadow-lg mb-6 tracking-tight">
                周雁和周丹莉就是天生一对
            </h1>
            <div class="flex justify-center">
                <div class="w-24 h-1 bg-white rounded-full opacity-80"></div>
            </div>
        </div>
        
        <div class="text-center animate-float-reverse">
            <h2 class="text-[clamp(1.5rem,4vw,3rem)] font-bold text-white text-shadow-lg tracking-tight">
                周雁和周丹莉不是真的我就是假的
            </h2>
        </div>
        
        <!-- 心形装饰 -->
        <div class="mt-16 flex justify-center">
            <div class="text-white text-[clamp(2rem,6vw,5rem)] animate-pulse">
                <i class="fa fa-heart"></i>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="absolute bottom-4 text-center w-full text-white/70 text-sm">
        <p>永恒的爱 · 直到永远</p>
    </footer>

    <script>
        // 添加更多动态效果
        document.addEventListener('DOMContentLoaded', () => {
            // 创建随机漂浮的爱心
            const createHearts = () => {
                const body = document.body;
                const totalHearts = 20;
                
                for (let i = 0; i < totalHearts; i++) {
                    const heart = document.createElement('div');
                    heart.className = 'absolute text-white';
                    heart.innerHTML = '<i class="fa fa-heart"></i>';
                    
                    // 随机位置和大小
                    heart.style.left = `${Math.random() * 100}vw`;
                    heart.style.top = `${Math.random() * 100}vh`;
                    heart.style.fontSize = `${1 + Math.random() * 2}rem`;
                    heart.style.opacity = `${0.1 + Math.random() * 0.4}`;
                    heart.style.animation = `float ${5 + Math.random() * 10}s ease-in-out infinite ${Math.random() * 5}s`;
                    
                    body.appendChild(heart);
                }
            };
            
            createHearts();
        });
    </script>
</body>
</html>
    